<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3D 地球</title>
  <!-- 画地球 选择框架 加速 -->
  <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
  <style>
    body {
      background: url("dream universe.jpg") 0 0 / 100% 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <canvas id="webglcanvas"></canvas>
  <script>
    // 3d 地球
    // 3D 时间就是镜头拍出的世界，导演
    let canvas, // 3d 容器
      camera, // 镜头
      scene, // 场景
      renderer, // 渲染器
      group; // 组


    // 物品
    let mouseX = 0, mouseY = 0; // mousemove 坐标
    // 球心
    let windowHalfX = window.innerWidth / 2;
    let windowHalfY = window.innerHeight / 2;

    init();
    animate();

    // 准备
    function init() {
      canvas = document.getElementById("webglcanvas"); // DOM
      camera = new THREE.PerspectiveCamera(
        60,
        window.innerWidth / window.innerHeight,
        1,
        2000
      ); // 实例化 相机
      // 相机离scene场景
      camera.position.z = 500;

      scene = new THREE.Scene(); // 实例化 场景
      scene.background = null;//new THREE.Color(0x00000000); // 背景色

      group = new THREE.Group(); // 组
      scene.add(group);
      // 纹理加载器
      let loader = new THREE.TextureLoader(); // 简单的加载器
      loader.load("earth.jpg", function (texture) {
        let geometry = new THREE.SphereGeometry(200, 40, 40); // 球体
        let material = new THREE.MeshBasicMaterial({
          // 材质
          map: texture,
        });
        // 球体 网格 用于绘制
        // 网格 网格材质 网格几何体
        let mesh = new THREE.Mesh(geometry, material); // 网格
        group.add(mesh);
        // 渲染器 目标是canvas
        renderer = new THREE.WebGLRenderer({
          canvas: canvas,
          antialias: true,
          alpha: true,
        });
        renderer.setClearColor(0x000000, 0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer.render(scene, camera);
        document.addEventListener("mousemove", onDocumentMouseMove, false);

        // 首次加载时触发一次 
        onWindowResize();
        window.addEventListener('resize',  onWindowResize);
        function onWindowResize() {
          const width = document.body.clientWidth;
          const height = document.body.clientHeight;

          renderer.setSize(width, height);
          camera.aspect = width / height;
          camera.updateProjectionMatrix();
          renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        }

      });
    }

    function onDocumentMouseMove(event) {
      mouseX = event.clientX - windowHalfX;
      mouseY = event.clientY - windowHalfY;
    }

    function animate() {
      // 递归 屏幕的刷帧率  60帧/s
      requestAnimationFrame(animate);
      render();
    }

    function render() {
      camera.position.x += (mouseX - camera.position.x) * 0.05;
      camera.position.y += (mouseY - camera.position.y) * 0.05;
      camera.lookAt(scene.position);
      group.rotation.y += 0.005;
      renderer && renderer.render(scene, camera);
    }

  </script>
</body>

</html>